/*
 * @Description:银行卡列表
 * @Author: tao.xie
 * @Date: 2019-03-20 16:03:46
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-05-10 15:57:24
 */
<template>
  <div>
    <!-- 添加银行卡包裹层 -->
    <div class="flex-h flex-vc flex-hsb add-card-wrapper">
      <span>银行卡列表</span>
      <i
        @click="pushToBindBankCard"
        class="icon iconfont icon-add-o baseColorNoAcitve"
        v-if="dataList.length>0"
      ></i>
    </div>

    <!-- 添加银行卡大入口,当银行卡列表为空的时候显示 -->
    <div
      class="flex-v flex-hs flex-vc add-card-big-wrapper"
      v-if="dataList.length===0"
      @click="pushToBindBankCard"
    >
      <i class="icon iconfont icon-add baseBgColorNoActive"></i>
      <span>添加银行卡</span>
      <span>为保证账号资金安全，只能绑定本人银行卡</span>
    </div>

    <!-- 银行卡列表包裹层 -->
    <x-cell-swipe
      ref="cellSwipe"
      v-for="(item,index) in dataList"
      v-bind:key="index"
    >
      <!-- 测滑左边的银行卡组件 -->
      <bank-cell :data="item" />

      <!-- 测滑右边包裹层 -->
      <div
        slot="swipeRight"
        class="flex-h flex-vc delete-wrapper"
        @click.prevent.stop="deleteFunc(item, index)"
      >
        <div class="flex-h flex-hc flex-vc delete-content-wrapper">
          <i class="icon iconfont icon-delete baseColorNoAcitve"></i>
        </div>
      </div>
    </x-cell-swipe>
  </div>
</template>

<script>
import { getBankCardList, unbindBankCard } from '../api/api.js'
import XCellSwipe from '@/components/cellswipe/XCellSwipe'
import BankCardCellModule from './BankCardCellModule'
import { open } from '@/utils/JumpUtils.js'
import ConfirmBox from '@/components/confirm/ConfirmBox.js'
export default {
  components: {
    'x-cell-swipe': XCellSwipe,
    'bank-cell': BankCardCellModule
  },
  mounted() {
    this._getBankCardList()

    // 返回刷新银行卡列表
    window.onResume = () => {
      this._getBankCardList()
    }
  },
  data() {
    return {
      dataList: []
    }
  },
  methods: {
    _getBankCardList: async function () {
      let list = await getBankCardList()
      this.dataList = list
    },
    deleteFunc: function (item, index) {
      // 弹框确认
      ConfirmBox.show({
        title: '提示',
        message: '解绑后将无法使用此银行卡支付乘车行程！',
        confirmText: '确认解绑',
        cancelText: '取消'
      }).then(() => {
        this._unbindBankCard(item, index)
      }).catch(() => {
        this.$refs.cellSwipe[index].swipeMove()
      })
    },
    pushToBindBankCard: function () {
      open('bindcard.html?_tv=false&_knbw=true')
    },
    _unbindBankCard: async function (item, index) {
      try {
        let rs = await unbindBankCard(item.bindCardId)
        if (rs) {
          this.dataList.splice(index, 1)
        }
      } catch (err) {
      } finally {
        this.$refs.cellSwipe[index].swipeMove()
      }
    }

  }
}
</script>

<style>
/* 添加银行卡包裹层 */
.add-card-wrapper {
  height: 117px;
  width: 750px;
}

/* 添加银行卡下span元素 */
.add-card-wrapper > span {
  margin-left: 30px;
  color: #333;
  font-size: 16px; /*no*/
  line-height: 22px; /*no*/
}

/* 添加银行卡+号 */
.add-card-wrapper > i {
  padding: 30px;
  font-size: 44px;
  /* font-weight: bold; */
}

/*添加银行卡大的入口包裹*/
.add-card-big-wrapper {
  width: 690px;
  height: 160px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 0px 8px #dedede; /*no*/
  margin: 35px 30px;
}
/*添加银行卡大的入口包裹-加号*/
.add-card-big-wrapper i:first-of-type {
  color: #fff;
  border-radius: 100%;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  margin-top: 16px;
}
/*添加银行卡大的入口包裹-添加银行卡**/
.add-card-big-wrapper span:first-of-type {
  color: #333;
  font-size: 15px; /*no*/
  line-height: 21px; /*no*/
  margin-top: 5px;
}

/*添加银行卡大的入口包裹-第二段文字*/
.add-card-big-wrapper span:nth-of-type(2) {
  color: #999999;
  font-size: 12px; /*no*/
  line-height: 17px; /*no*/
  margin-top: 4px;
}

/*测滑删除包裹层*/
.delete-wrapper {
  width: 114px;
  height: 200px;
}

/*测滑内容包裹层*/
.delete-content-wrapper {
  width: 90px;
  height: 90px;
  /* margin-right: 24px; */
  border-radius: 100%;
  border: 1px solid #3795ff; /*no*/
}
</style>
